<template>
  <div>
    <Category title="游戏">
      <ul slot="item">
        <li v-for="(g, index) in games" :key="index">{{ g }}</li>
      </ul>
      <div slot="websites">
        <a href="https://www.baidu.com">百度一下</a>
        <a href="https://www.baidu.com">百度一下</a>
        <a href="https://www.baidu.com">百度一下</a>
      </div>
    </Category>
    <Category  title="电影">
      <ul slot="item">
        <li v-for="(f, index) in films" :key="index">{{ f }}</li>
      </ul>
      <template v-slot:websites>
        <div>
          <a href="https://www.baidu.com">百度一下</a>
          <a href="https://www.baidu.com">百度一下</a>
          <a href="https://www.baidu.com">百度一下</a>
        </div>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from './components/Category.vue';

export default {
  name: 'App',
  components: {
    Category
  },
  data() {
    return {
      foods: ['火锅', '烧烤', '油炸'],
      games: ['魂斗罗', '劲舞团', '超级玛丽'],
      films: ['教父', '黑暗侵袭', '黑客帝国']
    }
  }
}
</script>